<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>09-Provide和inject以及Ref的用法</title>

    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>

    <!-- dom  ref -->
    <script>
      const app = Vue.createApp({
        setup() {
          const { provide, ref, readonly } = Vue;
          const name = ref("yunmu");
          provide("changeName", (value) => {
            name.value = value;
          });
          provide("name", readonly(name));

          return {};
        },

        template: `
                    <child name="dsb" value="hahahaha"/>
                    
                `,
      });
      //const app = Vue.createApp({
      //  setup() {
      //    const { ref, onMounted } = Vue;

      //    const hello = ref(null);

      //    onMounted(() => {
      //      console.log(hello.value);
      //    });

      //    return { hello };
      //  },

      //  template: `
      //              <div ref="hello">hello World</div>
      //          `,
      //});

      app.component("child", {
        props: ["name", "value"],
        setup(props) {
          const { inject } = Vue;

          const name = inject("name");
          const changeName = inject("changeName");

          const handleClick = () => {
            changeName("baojiejie");
            console.log(props);
            //name.value = "xiangyun"
          };

          return { name, handleClick, props };
        },

        template: `<div @click="handleClick">{{name}}{{props.name}}</div>`,
      });

      //Composition API 提供的获取真实DOM节点的ref方法
      //app.component("child", {
      //  setup(){
      //    const { inject, ref, onMounted } = Vue;

      //    const name = inject("name");
      //    const changeName = inject("changeName");

      //    const handleClick = () => {
      //        changeName("baojiejie");
      //        console.log(yunmu.value);
      //        //name.value = "xiangyun"
      //    }

      //    const yunmu = ref(null);

      //    return {name, handleClick,yunmu}
      //  },

      //    template:`<div @click="handleClick" ref="yunmu">{{name}}</div>`
      //})

      const vm = app.mount("#root");
    </script>
  </body>
</html>
